<template>
<div>
 <el-row >
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="档案号/姓名" size="small" class="form-control" v-model="like">
            <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
          </el-input>
        </el-col>
      </el-row>
 </el-row>


  <el-table
    :data="searchUser(like).slice((search.currentPage - 1) * pagesize, search.currentPage * pagesize)"
    border
    style="width: 100%">

 <el-table-column
      prop="member.fileNumber"
      label="档案号"
      width="120">
    </el-table-column>


    <el-table-column
      prop="member.name"
      label="姓名"
      width="150">
    </el-table-column>

    <el-table-column
      prop="member.sex"
      label="性别"
      width="120">
    </el-table-column>
    <el-table-column
      prop="member.age"
      label="年龄"
      width="150">
    </el-table-column>

    <el-table-column
      prop="peopleClassify"
      label="人群分类 "
      width="120">
    </el-table-column>

    <el-table-column
      prop="tHealthmgr.healthMgrName"
      label="健康管理师 "
      width="120">
    </el-table-column>


    <el-table-column
      label="操作"
      width="120">
      <template slot-scope="scope">
        <!-- <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">确认预约</el-button> -->
        <el-button type="" size="small" @click="isclassification(scope.$index, scope.row)">确认分类</el-button>
      </template>
    </el-table-column>
  </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="search.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>


 <!-- 修改弹框 -->
         <el-dialog title="用户信息" :visible.sync="dialogFormVisible">

           <el-header>添加预约信息</el-header>

  <el-tabs :tab-position="tabPosition" style="height: 550px;margin-top: 50px;">
    <el-tab-pane label="个人信息">

<el-row :gutter="20">
  <el-col :span="5"><div>信息</div></el-col>
  <el-col :span="4"></el-col>
  <el-col :span="15"></el-col>
</el-row>

<el-row :gutter="20">
  <el-col :span="8">档案号:<el-input disabled  v-model="Member.fileNumber" /></el-col>
  <el-col :span="8">姓名:<el-input disabled  v-model="Member.name" /></el-col>
  <el-col :span="4"></el-col>
  <el-col :span="4"></el-col>
</el-row>

<el-row :gutter="20">
  <el-col :span="8">年龄:<el-input disabled v-model="Member.age" /></el-col>
  <el-col :span="8">性别:<el-input disabled v-model="Member.sex" /></el-col>
   <el-col :span="4"></el-col>
  <el-col :span="4"></el-col>
</el-row>

<el-row :gutter="20">
  <el-col >疾病史:<el-input disabled  v-model="TMemberMedicalhistory.previousHistory" /></el-col>
</el-row>

<el-row :gutter="20">
     <el-col >遗传史:<el-input disabled  v-model="TMemberMedicalhistory.familyHistory" /></el-col>
</el-row>

<el-row :gutter="20">
     <el-col >过敏史:<el-input disabled  v-model="TMemberMedicalhistory.allergicHistory" /></el-col>
</el-row>

    </el-tab-pane>

    <el-tab-pane label="体检信息" >
        <el-table
    :data="searchUser(like).slice((search.currentPage - 1) * pagesize, search.currentPage * pagesize)"
    border
    style="width: 100%">

 <el-table-column
      prop="member.fileNumber"
      label="档案号"
      width="220">
    </el-table-column>


    <el-table-column
      prop="member.name"
      label="体检日期"
      width="250">
    </el-table-column>

    <el-table-column
      label="操作"
      width="220">
      <template slot-scope="scope">
        <!-- <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">确认预约</el-button> -->
        <el-button type="" size="small" @click="isclassification(scope.$index, scope.row)">确认分类</el-button>
      </template>
    </el-table-column>
  </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="search.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>

    </el-tab-pane>

    <el-tab-pane label="评估结果">

    </el-tab-pane>

    <el-tab-pane label="确认分类">

    </el-tab-pane>

  </el-tabs>

          <div slot="footer"  class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <!-- 设置触发更新的方法 -->
            <el-button type="submit" @click="tjiao">确定</el-button>
          </div>
        </el-dialog>
</div>
</template>

<script>
import {setmeal} from '@/api/setmeal.js'
import {allpeople,tMemberMedicalhistory,tMemberExaminationByMid} from  '@/api/people.js'

export default {
  data(){

    return{
      pagesize:5,
      like:'',
      tableData:[],
      // tjxx:[],
      tabPosition:'top',
      search: {
        sort: "",
        offset: 0,
        limit: 10,
        currentPage: 1
      },
       dialogFormVisible: false,
       formLabelWidth: "80px",
          Member:{
            name:'',
            sex:'',
            age:'',
            idCard:'',
            phoneNumber:'',
            regTime:'',
            birthday:'',
            fileNumber:'',
          },
          TMemberMedicalhistory:{
     previousHistory:'',
    /**
     * 家族史
     */
     familyHistory:'',
    /**
     * 过敏史
     */
    allergicHistory:'',
          }
    }
  },
  methods:{

    searchUser(like){
      // console.log(like)
      return this.tableData.filter((item,i)=>{
            if(item.member.name.includes(like)){
              return item;
            }

          })
    },

    async isclassification(index,row){
      this.dialogFormVisible=true;
      let [res] =await Promise.all([
            tMemberMedicalhistory(row.tMemberId)
          ])
      this.Member.fileNumber= row.member.fileNumber;
      this.Member.name= row.member.name;
      this.Member.sex= row.member.sex;
      this.Member.age= row.member.age;
      this.TMemberMedicalhistory.previousHistory= res.data.previousHistory;
      this.TMemberMedicalhistory.familyHistory= res.data.familyHistory;
      this.TMemberMedicalhistory.allergicHistory= res.data.allergicHistory;

      this.tjxx();
      this.pageInit();
    },

    async tjxx(){
      //  let [res] =await Promise.all([
      //       tMemberExaminationByMid(row.tMemberId)
      //     ])
      console.log(this.tMemberId)
    },

    async pageInit2(){
          let [res] =await Promise.all([
            setmeal()
          ])
     },

     handleChange(value, direction){
          //  console.log(value, direction);

           console.log(value[0])

           this.order.setmeal_id=value[0]
      },

     async pageInit(){
        try{
          let [res] =await Promise.all([
            allpeople()
          ])
          // console.log(res.data)
          this.tableData=res.data
        }catch(error){
            console.log(error);
        }
     },


    async tjiao() {
            // console.log(this.Member.id)
            // console.log(this.value2)
         try{

          let [res] =await Promise.all([

            addorder(this.order)
          ])

        this.pageInit();

        }catch(error){
            console.log(error);
        }


            this.dialogFormVisible = false;
     },
     cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    }
    ,
    /* handleEdit(index, row) {
        // console.log(index)
               // 将数据的index传递过来用于实现数据的回显
               this.form = this.tableData[index];
                this.currentIndex = index;

                this.row=row
                // 设置对话框的可见
                this.dialogFormVisible = true;
          }, */



handleSizeChange(val) {
            this.search.limit = val;
             this.search.offset = (this.search.currentPage - 1) * val
              //  this.searchUser()
    },
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit
      this.search.currentPage = val
      // this.searchUser()
    },
    async handleCreateUser() {  //添加
      this.dialogFormVisible = true
    },

   /*  handleClick(row) {

        this.dialogFormVisible=true
      } */
  },

  filters:{
    dateFormat:function(data){
        var dt=new Date(data)
        var n=dt.getFullYear();
        var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
        var r=(dt.getDate()).toString().padStart(2,"0");
        dt.getHours();
        dt.getMinutes();
        dt.getSeconds();
        return n+"年"+y+"月"+r+"日";
      },
  },

  created() {
            this.pageInit();
            this.pageInit2();
          },
}
</script>

<style>
.el-row {
    margin-bottom: 20px;

  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-header{

    text-align: center;
    line-height: 60px;
  }

  .el-aside {

    text-align: center;
    line-height: 300px;
  }

  .el-main {

    text-align: center;
    line-height: 30px;
  }

  body > .el-container {
    margin-bottom: 20px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

